<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <link rel="stylesheet" href="../css/mescroll.min.css">

    <style type="text/css">

        /*mescroll滚动的区域*/
        .mescroll {
            position: fixed;
            top: 126px;
            bottom: 0;
            height: auto;
        }
    </style>

    <style>
        .c-act span{
            color: #82d7d0;
        }
        .p-r {
            position: relative;
        }

        .icon-sty1 {
            position: relative;
            top: -2px;
            left: 4px;
            transition: all 500ms linear;
        }

        .search-box {
            box-sizing: border-box;
            position: fixed;
            top: 0px;
            width: 100%;
            padding: 10px 15px;
            display: flex;
            margin-top: 44px;
            background-color: #fff;
            z-index: 5;
        }

        .search-box .area-sty {
            flex: 1;
        }

        .search-box .search-input {
            flex: auto;
        }

        .search-box .search-input .input-key {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #e5e5e5;
            line-height: 25px;
            border-radius: 25px;
            padding-left: 0.26rem;
        }

        .search-png-sty1 {
            position: absolute;
            top: 6px;
            left: 10px;
        }

        .search-type-content {
            position: fixed;
            top: 91px;
            width: 100%;
            display: flex;
            background-color: #fff;
            z-index: 5;
        }

        .search-type-content .item {
            flex: auto;
            text-align: center;
            padding: 8px 0;
        }
        .class-content-class{
            top: 118px;
        }
        .transform-180{
            transform: rotate(180deg);
        }
        #mescroll{
            background-color: #efeff4;
        }
    </style>
</head>

<body class="bg_fe">


<div class="" id="box-vue">
    <header>云家故事</header>
    <div class="search-box">
        <div class="area-sty js-chooseCity">
            <i class="dinwei-icon marr-9"></i><span>南京</span>
        </div>
        <div class="search-input p-r">
            <i class="search-png search-png-sty1"></i>
            <input type="search" class="input-key" placeholder="请输入关键字搜索" v-model="key" @keyup.13="search">
        </div>
    </div>
    <div class="search-type-content">
        <div class="item js-showAllType" data-status="0"><span>全部分类</span><i class="down-icon icon-sty1"></i></div>
        <div class="item js-showBrand" data-status="0"><span>品牌</span><i class="down-icon icon-sty1"></i></div>
        <div class="item js-showSort" @click="selfSort"><span>智能排序</span><i class="down-icon icon-sty1"></i></div>
    </div>
    <!--全部分类-->
    <div class="class-content-class modal-class modal-class-all">
        <div class="styl-box">
            <ul class="level-1">
                <li :class="index == 0?'js-choose0 act':'js-choose0'"
                    v-for="(items,index) in classifyList" :classId="items.id">
                    <div>{{items.name}}</div>
                    <ul class="level-2">
                        <li class="js-choose" v-for="item in items.children" :classId="item.id">
                            {{item.name}}
                        </li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>


    <!--品牌-->
    <div class="class-content-class modal-class modal-class-store">
        <div class="styl-box">
            <ul class="list">
                <li class="item js-choose1" :brandId="item.id" v-for="item in brandList">{{item.name}}</li>
            </ul>
        </div>
    </div>

    <!--滑动区域-->
    <div id="mescroll" class="mescroll">
        <div style="text-align: center;line-height: 30px" class="hide js-noData">暂无此数据!</div>
        <!--展示上拉加载的数据列表-->
        <ul id="dataList" class="data-love" v-cloak>
            <li class="li br-3" v-for="items in storeList">
                <div storeid="5" class="over-h p-r go-storedetail d-f" :storeId="items.id">
                    <div class="png-sty "><img :src="imgBaseurl + items.logoId"
                                              alt=""></div>
                    <div class="text-c">
                        <div class="marb-2"><span>{{items.name}}</span><i class="icon-lov love-icon"></i></div>
                        <div class="marb-2 ellipsis"><i class="dinwei-icon"></i> <span
                                class="area-t color-97 ">{{items.address}}</span></div>
                        <div><span class="btn-status" v-for="item in items.label">{{item}}</span></div>
                    </div>
                </div>
                <div class="child-data">
                    <div class="item to_product" :productId="item.id" v-for="item in items.productList">
                        <div class="marb-5">
                            <span class="money-sty red-act">￥{{item.nowPrice}}</span>
                            <span class="status-ms" v-if="item.isSeckill == 1">
                                <i class="miaosha-icon"></i>&nbsp;秒杀
                            </span>
                            <span>{{item.name}}</span></div>
                        <div><span class="money-sty money-sty1">￥{{item.price}}</span><span>已售{{item.saleNum}}</span></div>
                    </div>
                </div>
                <div class="look-more" :storeId="items.id"><a>查看更多&gt;&gt;</a></div>
            </li>
        </ul>
    </div>
    <!--蒙层-->
    <div class="modal-class">
        <div class="men-cen"></div>
    </div>
    <!--地址-->
    <div class="area_list_model">
        <header><a class="icon_back_2"></a>云家故事</header>
        <div class="head_height"></div>
        <div class="title">所有城市</div>
        <ul>
            <li v-for="item in cityList">{{item.city}}</li>
        </ul>
    </div>
</div>
</body>
<script src="../js/config.js"></script>
<script src="../js/mescroll.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var sendData = {
        lit: 31.26249,
        lat: 120.63212,
        city: '南京',
        keyword: '',
        classifyId: 0,
        brandId: 0,
        sort: 1,
        limit: '',
        page: '',
    }
    //调分页方法
    $(document).on('click', '.btn11', function () {
        sendData.city = '上海'
        searchData();
    })

    //创建vue对象
    var app = new Vue({
        el: "#box-vue",
        data: {
            mescroll: null,
            storeList: [],
            imgBaseurl:imgBaseurl,
            cityList:[],
            key:'',
            brandList: "",
            classifyList: "",
        },
        mounted: function () {
            var self = this;
            self.mescroll = new MeScroll("mescroll", {
                up: {
                    callback: self.upCallback, //上拉回调
                    page: {size: 2}, //可配置每页8条数据,默认10
                },
            });
            get_ajax("common/getCityList", {}, function (data) {
                var data = data.list;
                app.cityList = data;
            });
            get_ajax("common/brandList", {}, function (data) {
                var data = data.brandList;
                app.brandList = data;
            });
            get_ajax("common/classifyList", {}, function (data) {
                var data = data.classifyList;
                app.classifyList = data;
            });
        },
        methods: {
            upCallback: function (page) {
                var self = this;
                getListDataFromNet(page.num, page.size, function (curPageData, totalPage) {
                    if (page.num == 1) self.storeList = [];
                    self.storeList = self.storeList.concat(curPageData);
                    console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length + ", self.storeList.length==" + self.storeList.length);
                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
                }, function () {
                    self.mescroll.endErr();
                });
            },
            search:function () {
                sendData.keyword = app.key;
                searchData();
            },
            selfSort:function(){
                sendData.sort = (sendData.sort==1?2:1);
                searchData();
                sendData.sort==2?$('.js-showSort').addClass('c-act').find('i').addClass('transform-180'):$('.js-showSort').removeClass('c-act').find('i').removeClass('transform-180');
                $('.modal-class-store').slideUp(500);
                $('.men-cen').css('display','none')
                $('.js-showAllType').attr('data-status','0').find('i').removeClass('transform-180');
                $('.js-showBrand').attr('data-status','0').find('i').removeClass('transform-180');
                $('.modal-class-all').slideUp(500);
            }
        },
    });




    //上拉下拉啦分页方法
    function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
//        setTimeout(function () {
            sendData.limit = pageSize;
            sendData.page = pageNum;
            get_ajax("store/getStoreList", sendData, function (data) {
                var data = data.storeExlist;
                data.forEach(function (items) {
                    items.label = items.label.split(",");
                });
                var tolPag = 1000;
                var listData = data
                successCallback && successCallback(listData, tolPag);//成功回调
            });
//        }, 500)
    }
    //刷新方法
    function searchData(){
        sendData.page = 1;
        get_ajax("store/getStoreList", sendData, function (data) {
            var data = data.storeExlist;
            data.forEach(function (items) {
                items.label = items.label.split(",");
            });
            var tolPag = 1000;
            app.storeList = data;
            if(app.storeList.length<1){
                $('.js-noData').removeClass('hide');
            }else{
                $('.js-noData').addClass('hide');
            }

        });
    }

    //    选择地址
    $(document).on('click','.js-chooseCity',function(){
        $(".area_list_model").show().css("left","0");
    })
    $(document).on('click', '.icon_back_2', function () {
        $(".area_list_model").show().css("left","100%");
    })
    $(document).on('click', '.area_list_model ul li', function () {
        $(".area_list_model").hide().css("left","100%");
        var area = $(this).text();
        $(".js-chooseCity span").text(area);
        sendData.city = area;
        searchData()
    })

    //选品牌
    $(document).on('click','.js-showBrand',function(){
        $('.modal-class-all').css('display','none');
        $('.js-showAllType').attr('data-status','0').find('i').removeClass('transform-180');
        if($(this).attr('data-status')==0){
            $('.modal-class-store').slideDown(500);
            $(this).attr('data-status','1')
            $(this).find('i').addClass('transform-180')
            $('.men-cen').css('display','block')
        }else{
            $('.modal-class-store').slideUp(500);
            $(this).attr('data-status','0')
            $(this).find('i').removeClass('transform-180')
            $('.men-cen').css('display','none')
        }


    })
    $(document).on('click','.js-choose1',function(){
        $(this).addClass('act').siblings().removeClass('act');
        $('.class-content-class').css('display','none');
        $('.js-showBrand').attr('data-status','0')
        $('.js-showBrand').find('span').html($(this).html());
        sendData.brandId = $(this).attr('brandId')
        searchData()
        $('.js-showBrand').find('i').removeClass('transform-180')

        $('.js-showBrand').addClass('c-act')
        $('.men-cen').css('display','none')

    })
    //选分类
    $(document).on('click','.js-showAllType',function(){
        $('.modal-class-store').css('display','none');
        $('.js-showBrand').attr('data-status','0').find('i').removeClass('transform-180');
        if($(this).attr('data-status')==0){
            $('.modal-class-all').slideDown(500);
            $(this).attr('data-status','1')
            $(this).find('i').addClass('transform-180')
            $('.men-cen').css('display','block')
        }else{
            $('.modal-class-all').slideUp(500);
            $(this).attr('data-status','0')
            $(this).find('i').removeClass('transform-180')
            $('.men-cen').css('display','none')
        }
    })
    $(document).on('click', '.js-choose0', function () {
        $(this).addClass('act').siblings().removeClass('act');
        $('.level-2').hide();
        $(this).find('.level-2').show();
    })
    $(document).on('click', '.js-choose', function () {
        $(this).addClass('act').siblings().removeClass('act');
        $('.modal-class-all').css('display','none');
        $('.js-showAllType').attr('data-status','0')
        $('.js-showAllType').find('span').html($(this).html());
        sendData.classifyId = $(this).attr('classId')
        searchData()
        $('.js-showAllType').find('i').removeClass('transform-180')

        $('.js-showAllType').addClass('c-act')
        $('.men-cen').css('display','none')
    })

    $(document).on('click','.men-cen',function(){
        $(this).css('display','none');
        $('.modal-class-all').slideUp(500);
        $('.modal-class-store').slideUp(500);
        $('.js-showAllType').find('i').removeClass('transform-180')
        $('.js-showBrand').find('i').removeClass('transform-180')
    })

    //跳转页面
    $(document).on('click','.go-storedetail,.look-more', function () {
        var storeId = $(this).attr("storeId");
        window.location.href = 'store-detail.html?storeId='+storeId;
    })
    $(document).on('click', '.to_product', function () {
        var productId = $(this).attr("productId");
        window.location.href = 'product.html?productId='+productId;
    })

</script>

</html>